<template>
   <div class="luckyBagRain">
    <div class="frame">
     <img class="frameRule" @click="isRule" src="../../../static/rule.png" alt="" />
     <img class="frameRule frameCard" @click="myCard" src="../../../static/jilu.png" alt="" />
     <img class="frameRule2 frameCard" @click="updatePhoneShow = true" src="../../../static/bind.png" alt="" />
    </div>
    <img class="title" src="../../../static/game/egg/title.png" alt="" />
    <img v-show="!isShow" class="egg" src="../../../static/game/egg/egg.png" alt="" />
    <img v-show="isShow" class="clickEgg" src="../../../static/game/egg/clickEgg.gif" alt="" />
    <div class="button" @click="clickEgg"></div>

    <activityRule :show="ruleShow" :title="mallActivityEntity.strategy" @isRule="isRule"></activityRule>
    <changePhone v-if="updatePhoneShow" @phoneCancel="updatePhoneShow = false" :titles="titles"></changePhone>
   </div>
</template>

<script>
  // 请求接口
  import {
    activityInfo2,
    activityVerify,
    draw,
    placeOrder,
    postPrepay,
    getUserInfo
  } from '@/api/raffle.js'
  import changePhone from '@/components/changePhone'
  import activityRule from '@/components/activityRule'
  import { Dialog } from 'vant'
  import { setStore, getStore, removeStore } from '@/utils/storage'
  import { baseApi, wechatAuthUrlTail, preLoginUrl } from '@/config'
  import axios from 'axios'
  export default {
    components: {
      changePhone,
      activityRule
    },
    data() {
      return {
        ruleShow: false,
        isShow:false,
        activityCode: '', //活动信息唯一code
        updatePhoneShow: false, //手机号弹窗
        mallActivityEntity: {}, //活动信息
        activity: {}, //活动内容
        isSettimer: false,
        titles: '绑定手机号',
        goodsType: '',
        orderSn:'',
      }
    },
    mounted() {
      this.activityCode = this.$route.query.activityCode
      setStore('activityCode',this.$route.query.activityCode)
      this.activityInfo2()
    },
    methods: {
      clickEgg(){
        let that = this
        let data ={
          activityId:this.mallActivityEntity.id
        }
        placeOrder(data).then(res=>{
          console.log(res)
            that.orderSn = res.data.orderSn
            if(res.code==0){
              if(res.data.needToPay==1){
                let pay = {
                  orderId:res.data.orderSn,
                  tradeType:'JSAPI'
                }
                that.prepay(pay)
              }else{
                that.start()
              }
            }else{
              that.showToast(res.msg)
            }
        }).catch(res=>{
          console.log(1)
          if(res.code==7){
            this.updatePhoneShow = true
          }else{
            that.showToast(res.msg)
          }
        })
      },
      //预支付(拿到微信支付参数)
      prepay(pay){
        let that = this
        postPrepay(pay).then(res=>{
          console.log(res)
          if (res.msg === 'success') {
            if (typeof WeixinJSBridge === 'undefined') {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false)
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady)
                document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady)
              }
            } else {
              that.onBridgeReady(res.data)
            }
          }
        }).catch(fail=>{
          that.showToast(fail.msg)
        })
      },
      // 微信支付预支付OK时，发起真正微信支付请求
      onBridgeReady(data) {
        const that = this
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            appId: data.appId, // 公众号名称，由商户传入
            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, // 随机串
            package: data.packageValue, // 微信订单id
            signType: 'MD5', // 微信签名方式：
            paySign: data.paySign // 微信签名
          },
          function(res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              that.showToast('支付成功...')
              setTimeout(() => {
               that.start()
              }, 1000);
            } else {
              that.showToast('未完成支付...')
              return
            }
          })
      },
      // 抽奖
      start() {
        let data = {
          activityId: this.mallActivityEntity.id,
          number: 1,
          orderSn:this.orderSn
        }
        draw(data).then(res => {
          if (res.code == 0) {
            this.isShow = true
            setTimeout(()=>{
              this.isShow = false
              if (!res.data.lotteryBool) {
                this.dialog('非常遗憾未中奖')
              } else {
                this.dialog('恭喜您抽中了' + res.data.goodsName)
              }
            },2000)
          } else {
            this.dialog(res.msg)
          }
        }).catch(res => {
          if (res.code == 7) {
            this.updatePhoneShow = true
          }
          this.dialog(res.msg)
        })
      },
      // 活动规则
      isRule() {
        this.ruleShow = !this.ruleShow
      },
      // 活动卡卷1
      myCard() {
        this.$router.push({
          path: '/mycard?id='+this.mallActivityEntity.id
        })
      },
      //活动信息
      activityInfo2() {
        let data = {
          activityCode: this.activityCode
        }
        axios({
          method: 'get',
          url: baseApi + 'app/wheelLottery/activityInfo',
          params: {
             activityCode: this.activityCode
          }
        })
        .then(res => {
          let data = res.data.data
          console.log(data)
          setStore('appid',data.mallActivityEntity.appId)


          if(!getStore('token')){
            let wechatAuthUrlFront = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+data.mallActivityEntity.appId+'&redirect_uri='
            var jumpUrl = wechatAuthUrlFront + encodeURIComponent(preLoginUrl) + wechatAuthUrlTail
            console.log(jumpUrl)
            setStore('loginRequestUrl',window.location.href)
            setTimeout(function() {
              location.href = jumpUrl
            }, 1500)
          }else{
            this.mallActivityEntity = data.mallActivityEntity
            this.activity = data
            document.title = data.mallActivityEntity.name
            this.isShow = false
          }
        })
        .catch(res => {
        })
      },

      // 获取白名单资格
      activityVerify() {
        let data = {
          id: this.mallActivityEntity.id
        }
        activityVerify(data).then(res => {
          if (res.code == 0) {
            this.number = res.data.number
          } else {
            this.dialog(res.msg)
          }
        }).catch(res => {
          if (res.code == 7) {
            this.updatePhoneShow = true
          }
          this.dialog(res.msg)
        })
      },
      // 提示
      dialog(message, url) {
        Dialog.alert({
          message: message,
        }).then(() => {
          // on close
          if (url) {

          }
        });
      },
      showToast(msg) {
        this.$toast({
          message: msg,
          position: 'center',
          duration: 2500
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
.luckyBagRain{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: url('../../../static/game/egg/bj.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .title{
    display: block;
    width: 355px;
    height: 88px;
    margin: 91px auto 0;
  }
  .egg{
    display: block;
    width: 315px;
    height: 338px;
    margin: 71px auto 0;
  }
  .button{
    width: 280px;
    height: 53px;
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    background: url('../../../static/game/egg/button.png') no-repeat;
    background-size: 100% 100%;
  }
  .clickEgg{
    display: block;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
  }
  .frameCard {
    margin-top: 10px;
  }

  .frameRule {
    width: 26px;
    height: 90px;
    color: #fff;
    border-radius: 12px 0 0 12px;
    box-sizing: border-box;
    display: block;
  }
  .frameRule2{
    display: block;
    width: 26px;
    height: 110px;
    color: #fff;
    border-radius: 12px 0 0 12px;
    box-sizing: border-box;
  }

  .frame {
    position: absolute;
    top: 20px;
    right: 0;
  }
}
</style>
